<template>
  <div class="q-gutter-sm row items-center no-wrap">
    <q-input dense outlined v-model="search" style="min-width: 60px" input-class="text-right" class="q-ml-md">
      <template v-slot:append>
        <q-icon v-if="search === ''" name="search"/>
        <q-icon v-else name="clear" class="cursor-pointer" @click="search = ''"/>
      </template>
    </q-input>
    <q-btn round dense flat
           :icon="this.$q.fullscreen.isActive?'fullscreen_exit':'fullscreen'"
           v-if="$q.screen.gt.sm" @click="fullScreen">
      <q-tooltip v-if="!this.$q.fullscreen.isActive">全屏</q-tooltip>
      <q-tooltip v-if="this.$q.fullscreen.isActive">退出全屏</q-tooltip>
    </q-btn>
    <q-btn round dense flat icon="video_call" v-if="$q.screen.gt.sm">
      <q-tooltip>创建</q-tooltip>
    </q-btn>
    <q-btn round dense flat icon="apps" v-if="$q.screen.gt.sm">
      <q-tooltip>应用</q-tooltip>
    </q-btn>
    <q-btn round dense flat icon="message" v-if="$q.screen.gt.sm">
      <q-tooltip>消息</q-tooltip>
    </q-btn>
    <q-btn round dense flat icon="notifications">
      <q-badge color="red" text-color="" floating>
        2
      </q-badge>
      <q-tooltip>通知</q-tooltip>
    </q-btn>
    <q-btn round flat>
      <q-menu style="width: 200px">
        <div class="row no-wrap q-pa-md">
          <div class="column items-center">
            <q-avatar size="72px">
              <img src="https://cdn.quasar.dev/img/boy-avatar.png" alt="">
            </q-avatar>
            <div class="text-subtitle1 q-mt-md q-mb-xs">{{ userInfo.name }}</div>
            <q-btn
                color="primary"
                label="注销"
                size="sm"
                v-close-popup
                @click="logout"
            />
          </div>
        </div>
      </q-menu>
      <q-avatar size="26px">
        <img src="https://cdn.quasar.dev/img/boy-avatar.png" alt="">
      </q-avatar>
      <q-tooltip>账号</q-tooltip>
    </q-btn>
  </div>
</template>

<script>
import iUser from 'src/api/user'

export default {
  name: 'ToolbarItemRight',
  data () {
    return {
      search: '',
      mobileData: false,
      bluetooth: true
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    }
  },
  methods: {
    fullScreen () {
      if (this.$q.fullscreen.isActive) {
        // 退出全屏模式：
        this.$q.fullscreen.exit()
      } else {
        // 请求全屏模式：
        this.$q.fullscreen.request()
      }
    },
    async logout () {
      const domain = location.hostname
      this.$q.cookies.remove('x-access-token', { path: '/', domain })
      this.$q.cookies.remove('x-temp-token', { path: '/', domain })
      await iUser.logout()
      this.$q.notify({
        icon: 'insert_emoticon',
        message: '退出登录成功',
        color: 'green',
        position: 'top',
        timeout: 1500
      })
      await this.$router.push({ name: 'Login' })
    }
  }
}
</script>
